<template>
  <div class="userorder">
    <el-tabs >
      <!-- Ticket     -->
      <el-tab-pane>
        <template #label>
          <span class="header">Ticket</span>
        </template>
        <el-table :data="ticketTable" height="500" v-loading="loading">
          <el-table-column type="index" label="Index" width="70"/>
          <el-table-column prop="orderNo" label="Order No" width="150" :show-overflow-tooltip="true"/>
          <el-table-column prop="goodName" label="Good Name" width="300" :show-overflow-tooltip="true"/>
          <el-table-column prop="price" label="Price" width="120"/>
          <el-table-column prop="createTime" label="Create Time" width="150">
            <template #default="{row}">
              <span>{{ formatTime(row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payNo" label="Pay No" width="120" :show-overflow-tooltip="true"/>
          <el-table-column prop="payTime" label="Pay Time" width="150">
            <template #default="{row}">
              <span v-if="row.payTime">{{ formatTime(row.payTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Status" fixed="right" width="120">
            <template v-slot="{row}">
              <el-tag 
              :type="row.status === 'Paid' ? 'success' : 'danger'" 
              @click="row.status !== 'Paid' ? pay(row) : null"
              >{{row.status}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- Hotel Room -->
      <el-tab-pane>
        <template #label>
          <span class="header">Hotel Room</span>
        </template>
        <el-table :data="roomTable" v-loading="loading"  height="500">
          <el-table-column type="index" label="Index" width="70"/>
          <el-table-column prop="orderNo" label="Order No" width="150" :show-overflow-tooltip="true"/>
          <el-table-column prop="goodName" label="Good Name" width="300" :show-overflow-tooltip="true"/>
          <el-table-column prop="price" label="Price" width="120"/>
          <el-table-column prop="createTime" label="Create Time" width="150">
            <template #default="{row}">
              <span>{{ formatTime(row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payNo" label="Pay No" width="120" :show-overflow-tooltip="true"/>
          <el-table-column prop="payTime" label="Pay Time" width="150">
            <template #default="{row}">
              <span v-if="row.payTime">{{ formatTime(row.payTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Status" fixed="right" width="120">
            <template v-slot="{row}">
              <el-tag 
              :type="row.status === 'Paid' ? 'success' : 'danger'" 
              @click="row.status !== 'Paid' ? pay(row) : null"
              >{{row.status}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- Tour -->
      <el-tab-pane>
        <template #label>
          <span class="header">Tour</span>
        </template>
        <el-table :data="tourTable" v-loading="loading" height="500">
          <el-table-column type="index" label="Index" width="70"/>
          <el-table-column prop="orderNo" label="Order No" width="150" :show-overflow-tooltip="true"/>
          <el-table-column prop="goodName" label="Good Name" width="300" :show-overflow-tooltip="true"/>
          <el-table-column prop="price" label="Price" width="120"/>
          <el-table-column prop="createTime" label="Create Time" width="150">
            <template #default="{row}">
              <span>{{ formatTime(row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="payNo" label="Pay No" width="120" :show-overflow-tooltip="true"/>
          <el-table-column prop="payTime" label="Pay Time" width="150">
            <template #default="{row}">
              <span v-if="row.payTime">{{ formatTime(row.payTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Status" fixed="right" width="120">
            <template v-slot="{row}">
              <el-tag 
              :type="row.status === 'Paid' ? 'success' : 'danger'" 
              @click="row.status !== 'Paid' ? pay(row) : null"
              >{{row.status}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { formatTime } from '@/utils/format.js';
import request from '@/utils/request.js';
import { onMounted, ref } from "vue";

let ticketTable = ref([])
let roomTable = ref([])
let tourTable = ref([])

let ticketTotal = ref(0)
let roomTotal = ref(0)
let tourTotal = ref(0)

let loading = ref(false) // loading

async function getAll() {
  loading.value = true // open loading before get info
  const res = await request.get('/order')
  console.log('orders: ', res.data.data);
  res.data.data.forEach(row => {
    if (row.goodType === 'Ticket') {
      ticketTable.value.push(row);
      ticketTotal.value ++
    } else if (row.goodType === 'Tour') {
      tourTable.value.push(row);
      tourTotal.value ++
    } else{// Tour
      roomTable.value.push(row);
      roomTotal.value ++
    }
  });  
  loading.value = false // close loading after get info
}

onMounted(() => {
  getAll();
});

const pay = async (row) => {
  window.open('http://localhost:8080/alipay/pay?orderNo='+row.orderNo)
  getAll()
  ElMessage.success("Successfully Paid!")
}
</script>

<style lang="less" scoped>
.header {
  width: 265px;
  color: #409eff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
</style>
